<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>雨水雨量实时监测系统</title>
		<link rel="stylesheet" type="text/css" th:href="@{/layui-v2.6.8/layui/css/layui.css}"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/layui-v2.6.8/layui/layui.js}"></script>
		<script th:src="@{/js/echarts.min.js}"></script>
		<style>
			body{
				background-image: url("/img/index.jpg");
			}
			.div_main_side{
				height: 200px;
				width: 100%;
			}
			.div_main_left_box{
				margin-left: 5px;
				margin-top: 5px;
				height: calc(100% - 10px);
				width: calc(100% - 10px);
				border: 2px solid #000000; /* 2像素宽的实线边框，颜色为黑色 */
				border-radius: 10px; /* 所有四个角的圆角半径为10像素 */
			}
			.div_main_center1{
				height: 400px;
				width: 100%;
			}
			.div_main_center2{
				height: 200px;
				width: 100%;
			}
			.div_main_center1_box{
				margin-left: 5px;
				margin-top: 5px;
				height: calc(100% - 10px);
				width: calc(100% - 10px);
			}
			.div_main_center2_box{
				margin-left: 5px;
				margin-top: 5px;
				height: calc(100% - 10px);
				width: calc(100% - 10px);
				border: 2px solid #000000; /* 2像素宽的实线边框，颜色为黑色 */
				border-radius: 10px; /* 所有四个角的圆角半径为10像素 */
			}
			.div_main_right{
				height: 600px;
				width: 100%;
			}
			.div_main_right_box{
				margin-left: 5px;
				margin-top: 5px;
				height: calc(100% - 10px);
				width: calc(100% - 10px);
				border: 2px solid #000000; /* 2像素宽的实线边框，颜色为黑色 */
				border-radius: 10px; /* 所有四个角的圆角半径为10像素 */
			}
		</style>
	</head>
	<body >
		<div>
			<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
			  <li class="layui-nav-item"><a href="/rainwater/page/index">首页</a></li>
			  <li class="layui-nav-item"><a href="/rainwater/page/show">实时显示</a></li>
			  <li class="layui-nav-item layui-this"><a href="/rainwater/page/analysis">数据分析</a></li>
			  <li class="layui-nav-item"><a href="/rainwater/page/point">测点管理</a></li>
				<li class="layui-nav-item"><a href="/rainwater/page/user">用户管理</a></li>
				<li class="layui-nav-item">
					<a th:href="@{/rainwater/page/individual}"><img src="//t.cn/RCzsdCq" class="layui-nav-img">用户</a>

				</li>
			</ul>

		</div>
		<div class="layui-fluid	">
			<div class="layui-row">
				<div class="layui-col-md3 ">
					<br>
					<div class="div_main_side"  >
						<div style="background-color: #F0F0F0;opacity: 0.9;" class="div_main_left_box">
							<div id="fig_user" style="width: 100%;height: 100%"></div>
						</div>
					</div>
					<div class="div_main_side">
						<div style="background-color: #F0F0F0;opacity: 0.9;" class="div_main_left_box">
							<div id="fig_tem" style="width: 100%;height: 100%"></div>
						</div>
					</div>
					<div class="div_main_side">
						<div style="background-color: #F0F0F0;opacity: 0.9;" class="div_main_left_box">
							<div id="fig_point" style="width: 100%;height: 100%"></div>
						</div>
					</div>
				</div>
				<div class="layui-col-md6 ">
					<div class="div_main_center1">
<!--						<div id="ad" class="div_main_center_box"></div>-->
						<div class="layui-carousel div_main_center1_box	" id="test1">
							<div carousel-item>
								<div><img th:src="@{/img/lun1.jpg}" style="width: 100%;height: 100%"></div>
								<div><img th:src="@{/img/lun2.jpg}" style="width: 100%;height: 100%"></div>
								<div><img th:src="@{/img/lun3.jpg}" style="width: 100%;height: 100%"></div>
								<div><img th:src="@{/img/lun4.jpg}" style="width: 100%;height: 100%"></div>
							</div>
						</div>
					</div>
					<div class="div_main_center2">
						<div style="background-color: #F0F0F0;opacity: 0.9;" class="div_main_center2_box">
							<div id="fig_AW" style="width: 100%;height: 100%"></div>
						</div>
<!--						<div id="fig_AW" class="div_main_center2_box"></div>-->
					</div>
				</div>
				<div class="layui-col-md3 ">
					<br>
					<div class="div_main_right" >
						<div class="div_main_right_box" style="background-color: #F0F0F0">
							<div class="layui-row">
								<div class="layui-col-md10 layui-col-md-offset2">
									<form class="layui-form layui-form-pane" action="">
										<br>
										<div class="layui-form-item">
											<div class="layui-inline">
												<div class="layui-row">
													<div class="layui-col-md3">
														<label class="layui-form-label">区间</label>
													</div>
													<div class="layui-col-md3">
														<div class="layui-inline" id="ID-laydate-range">
															<div class="layui-input-inline">
																<input type="text" name="startData" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
															</div>
															<div class="layui-input-inline">
																<input type="text" name="endData" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-row">
												<div class="layui-col-md3">
													<label class="layui-form-label">选择观测点</label>
												</div>
												<div class="layui-col-md9">
													<div class="layui-input-inline">
														<select name="province" id="province">
															<option >请选观测点</option>
															<option th:value="${point.id}"  th:each="point:${points}" th:text="${point.name}">请选择观测点</option>
<!--															<option th:value="qweqw">请选择测点</option>-->
<!--															<option value="qweqweq">请选择观测点</option>-->
<!--															<option value="qweqweq">请选择观测点</option>-->
														</select>
													</div>
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-input-block">
												<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">生成图表</button>
												<button type="reset" class="layui-btn layui-btn-primary">重置</button>
											</div>
										</div>
									</form>
								</div>
							</div>
							<div>
								<div id="fig_water" style="width: 100%; height: 300px"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<footer class="layui-footer">
			<p>2024年10月制。</p>
			<p>由cfy提供</p>
		</footer>
	</body>
</html>
<script>
	var fig_user = echarts.init(document.getElementById('fig_user'));//圆环
	var fig_tem = echarts.init(document.getElementById('fig_tem'));//折线
	var fig_point = echarts.init(document.getElementById('fig_point'));//柱
	var fig_AW = echarts.init(document.getElementById('fig_AW'));//
	var fig_water = echarts.init(document.getElementById('fig_water'));//柱

	layui.use(['carousel','form', 'laydate', 'util'], function(){
		var carousel = layui.carousel;
		var form = layui.form;
		var layer = layui.layer;
		var laydate = layui.laydate;
		var util = layui.util;

		// 日期
		laydate.render({
			elem: '#ID-laydate-range',
			range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
		});
		//建造实例
		carousel.render({
			elem: '#test1',
			height:'100%'
			,width: '100%' //设置容器宽度
			,arrow: 'always' //始终显示箭头
			//,anim: 'updown' //切换动画方式
		});
		// 监听下拉框选择
		form.on('select(province)', function(data){
			console.log(data.elem); // 得到select原始DOM对象
			console.log(data.value); // 得到被选中的值
			console.log(data.othis); // 得到美化后的DOM对象
			// 执行其他操作，比如根据选中的值加载城市列表
		});
		// 提交事件
		form.on('submit(demo1)', function(data){
			var field = data.field; // 获取表单字段值
			// // 显示填写结果，仅作演示用
			// layer.alert(JSON.stringify(field), {
			// 	title: '当前填写的字段值'
			// });
			let jsonData = JSON.stringify(field);
			$.ajax({
				url:'/rainwater/page/analysis/createFig',
				type:'POST',
				data:jsonData,
				dataType:'json',
				contentType: "application/json",
				success:function (response){
					console.log(response)
					dataWater(response.data)
				},
				error:function (xhr, status, error){
					console.error('Error:', status, error);
				}
			});
			return false; // 阻止默认 form 跳转
		});
	});
	createFig();
	function createFig(){
		$.ajax({
			url:'/rainwater/page/analysis/figData',
			type:'POST',
			data:{fun:'fig'},
			dataType:'json',
			success:function (response){
				console.log(response)
				dataUser(response.data.users);
				dataPoint(response.data.point);
				dataTem(response.data.tem);
				dataAirWind(response.data.air,response.data.wind)
			},
			error:function (xhr, status, error){
				console.error('Error:', status, error);
			}
		});
	}
	// dataWater();
	function dataWater(data) {
		let keys = [];
		let values = [];
		for(let key in data){
			if (data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链
				keys.push(key);
				values.push(data[key]);
			}
		}
		option_water = {
			title: {
				text: '降雨量变化',
				left: 'center',
			},
			xAxis: {
				type: 'category',
				data: keys
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: values,
					type: 'line'
				}
			]
		};
		fig_water.setOption(option_water);
	}
	function dataUser(data){
		option_user = {
			title: {
				text: '用户',
				left: 'center',
				top: 'center'
			},
			series: [
				{
					type: 'pie',
					data: [
						{
							value: data[0],
							name: '管理员'
						},
						{
							value: data[1],
							name: '普通用户'
						}
					],
					radius: ['40%', '70%']
				}
			]
		};
		fig_user.setOption(option_user);
	}
	function dataTem(data){
		let keys = [];
		let values = [];
		for(let key in data){
			if (data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链
				keys.push(key);
				values.push(data[key]);
			}
		}
		option_tem = {
			title: {
				text: '温度',
				left: 'center',
				// top: 'center'
			},
			xAxis: {
				type: 'category',
				data: keys
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: values,
					type: 'line'
				}
			]
		};
		fig_tem.setOption(option_tem);
	}
	function dataPoint(data){
		let keys = [];
		let values = [];
		for(let key in data){
			if (data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链
				keys.push(key);
				values.push(data[key]);
			}
		}
		option_point = {
			title: {
				text: '观测点分步信息',
				left: 'center',
				// top: 'center'
			},
			xAxis: {
				data: keys
			},
			yAxis: {},
			series: [
				{
					type: 'bar',
					data: values
				}
			]
		};
		fig_point.setOption(option_point);
	}

	function dataAirWind(air,wind){
		let keys = [];
		let A_values = [];
		let W_values = [];
		for(let key in air){
			if (air.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链
				keys.push(key);
				A_values.push(air[key]);
				W_values.push(air[key]);
			}
		}
		option_AW = {
			title: {
				text: '气压与风速',
				left: 'center',
			},
			xAxis: {
				data: keys
			},
			yAxis: {},
			series: [
				{
					data: A_values,
					type: 'line',
					stack: 'x'
				},
				{
					data: W_values,
					type: 'line',
					stack: 'x'
				}
			]
		};
		fig_AW.setOption(option_AW)
	}
</script>
<!--
各省降雨量  柱形图
各省最高气温  散点图



各省观测点数量  折线  位置 中下

各个省  风速清空   折线
各个省气压   散点

-->